<template>
   <div class="area">
       <!-- 单价 -->
        <div class="unit-price">
            <div>单价：</div>
            <div>{{unitPrice}}元</div>
        </div>
       <!-- 数量 -->
        <div class="goods-number">
            <div>数量：</div>
            <div>
                <div @click="cutFn" v-bind:class="[btnStatus?'jinzhi':'']">-</div>
                <div>{{number}}</div>
                <div @click="addFn">+</div>
            </div>
        </div>
       <!-- 总价 -->
       <div class="all-price">
           <div>总价：</div>
           <div>{{sumPrice}}元</div>
       </div>
       <!-- 还需支付 -->
       <div class="pay">
           <div>还需支付：</div>
           <div>{{sumPrice}}元</div>
       </div>
       <!-- 提交订单按钮 -->
       <div class="submit-btn">
           提交订单
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               unitPrice:73,
               number:1,
               btnStatus:true
           }
       },
       computed: {
           sumPrice(){
               return this.unitPrice*this.number
           }
       },
       methods: {
           cutFn(){
               this.number--
               if(this.number <= 1){
                   this.number = 1
                   this.btnStatus = true/**切换按钮状态 */
               }
           },
           addFn(){
               this.number++
               this.btnStatus = false/**切换按钮状态 */
           }
       }
   }
</script>
   
<style scoped lang="less">
   .area{
       /*CSS3后代选择器>表示直接子元素，空格 表示所有后代*/
       .unit-price,.goods-number,.all-price,.pay{
           height: 1.2rem;
           line-height: 1.2rem;
           background: white;
           font-size: .4rem;
           display: flex;/**弹性布局 */
           padding: 0 .266667rem;
           &>div:nth-of-type(1){
               flex: 1;
           }
       }
       .unit-price{
           
       }
       .goods-number{
           &>div:nth-of-type(2){
               display: flex;/**弹性布局 */
               align-items: center;/**按钮垂直居中 */
               &>div:nth-of-type(1),&>div:nth-of-type(3){
                   width: .8rem;
                   height: .8rem;
                   border:1px solid #06c1ae;
                   text-align: center;
                   line-height: .8rem;
                   font-size: .666667rem;
                   color: #06c1ae;
                   border-radius: .08rem;
               }
               .jinzhi{
                   background: #e4e0e0;
                   color: #333 !important;
                   border-color: #999 !important;
               }
               &>div:nth-of-type(2){
                   width: 1.6rem;
                   height: .8rem;
                   border:1px solid #ddd8ce;
                   text-align: center;
                   line-height: .8rem;
                   margin:  0 .266667rem;
                   border-radius: .08rem;
               }
           }
       }
       .all-price,.pay{
           &>div:last-child{
               color: orange;
           }
       }
       .pay{
           margin-top: .266667rem;
       }
       .submit-btn{
           margin: .373333rem .266667rem;
           background: #f90;
           font-size: .533333rem;
           height: 1.2rem;
           line-height: 1.2rem;
           text-align: center;
           border-radius: .08rem;
           color: #fff;
           justify-content: center;
       }
   }
</style>